<template>
	<view style="margin-bottom: 120upx;">
		<view class="status" v-if="orderDetails.status==0">
			<view class="left">
				<view>待付款</view>
				<view>15分钟后取消</view>
			</view>
			<view class="right">
				<!-- <image src="../../static/status.png"></image> -->
			</view>
		</view>
		<view class="status" v-if="orderDetails.status==1">
			<view class="left">
				<view>待配送</view>
				<view>15分钟未配送,可免费取消订单</view>
			</view>
			<view class="right">
				<!-- <image src="../../static/status.png"></image> -->
			</view>
		</view>
		<view class="status" v-if="orderDetails.status==2">
			<view class="left">
				<view>配送中</view>
				<view>请耐心等待</view>
			</view>
			<view class="right">
				<!-- <image src="../../static/status.png"></image> -->
			</view>
		</view>
		<view class="status" v-if="orderDetails.status==3">
			<view class="left">
				<view>交易成功</view>
				<view>订单未评价,是否满意该次交易?</view>
			</view>
			<view class="right">
				<!-- <image src="../../static/status.png"></image> -->
			</view>
		</view>
		<view class="status" v-if="orderDetails.status==5">
			<view class="left">
				<view>交易已关闭</view>
				<view></view>
			</view>
			<view class="right">
				<!-- <image src="../../static/status.png"></image> -->
			</view>
		</view>
		<view class="status" v-if="orderDetails.status==10">
			<view class="left">
				<view>交易完成</view>
				<view></view>
			</view>
			<view class="right">
				<!-- <image src="../../static/status.png"></image> -->
			</view>
		</view>
		<view class="shipping_address">

			<view class="icon">
				<image src="../../static/my/address.png"></image>
			</view>
			<view class="site">
				<view class="top">
					<text class="consignee">{{orderDetails.consignee}}</text>
					<text class="phone">{{orderDetails.phone}}</text>
				</view>
				<view class="">{{orderDetails.shipping_address}}</view>
			</view>
		</view>
		<view class="appointment">
			<view class="title">

				<text>预约送达时间</text>
			</view>
			<view class="date">
				{{orderDetails.appointment_time}}
			</view>
		</view>
		<view class="commoditys">
			<view class="commodity" v-for="commodity in orderDetails.commodityData">
				<image :src="commodity.main_img" @click="openCommodity(commodity.commodity_id)"></image>
				<view class="text" @click="openCommodity(commodity.commodity_id)">
					<view class="title">{{commodity.commodity_title}}</view>
					<!-- <view class="specification">{{commodity.specification}}</view> -->
					<view class="price_count">
						<text class="price">￥{{commodity.commodity_price/100}}</text>
						<text class="count"> x {{commodity.count}}</text>
					</view>
				</view>
				<!-- <view class="function" >
					<view v-if="commodity.commodity_status==1" @click="orderRefundDetails(commodity.id)">退款中</view>
					<view v-if="commodity.commodity_status==2" @click="orderRefundDetails(commodity.id)">退款成功</view>
					<view v-if="commodity.commodity_status!=1&&commodity.commodity_status!=2&&commodity.commodity_status!=3&&orderDetails.status!=5&&orderDetails.status!=0&&orderDetails.status!=1&&orderDetails.status!=2" @click="refund(commodity)">退款</view>
				</view> -->
			</view>

		</view>

		<view class="order_information">
			<view class="headline">
				<text>订单信息</text>
			</view>
			<view class="list">
				<view class="title">订单编号:</view>
				<view class="content">{{orderDetails.orderNumber}}</view>
			</view>
			<view class="list">
				<view class="title">付款方式:</view>
				<view class="content">
					<text v-if="orderDetails.payment_method==0">未支付,到付款</text>
					<text v-if="orderDetails.payment_method==1">线上支付</text>
				</view>

			</view>
			<view class="list">
				<view class="title">创建时间:</view>
				<view class="content">{{getDate(orderDetails.creation_time)}}</view>
			</view>
			<view class="list" v-if="orderDetails.payment_time>0">
				<view class="title">付款时间:</view>
				<view class="content">{{getDate(orderDetails.payment_time)}}</view>
			</view>
			<view class="list" v-if="orderDetails.distribution_time">
				<view class="title">配送时间:</view>
				<view class="content">{{(getDate( orderDetails.distribution_time))}}</view>
			</view>
			<view class="list" v-if="orderDetails.delivery_time>0">
				<view class="title">送达时间:</view>
				<view class="content">{{getDate(orderDetails.delivery_time)}}</view>
			</view>
			<view class="list" v-if="orderDetails.cancel_time">
				<view class="title">关闭时间:</view>
				<view class="content">{{getDate(orderDetails.cancel_time)}}</view>
			</view>
			<view class="list" v-if="orderDetails.evaluate_time">
				<view class="title">评价时间:</view>
				<view class="content">{{getDate(orderDetails.evaluate_time)}}</view>
			</view>

			<view class="list">
				<view class="title">留言:</view>
				<view class="content">{{orderDetails.leave_word||'无'}}</view>
			</view>
			
			
			<view class="list" v-if="horsemanEntity">
				<view class="title">骑手名称:</view>
				<view class="content">{{horsemanEntity.name}}</view>
			</view>
			
			
			<view class="list" v-if="horsemanEntity">
				<view class="title">骑手手机号:</view>
				<view class="content">{{horsemanEntity.mobile}}</view>
			</view>
		</view>

		<view id="function" v-if="orderDetails.status!=5">
			<view v-if="orderDetails.status==0" @click="setCloseOrder(orderDetails.orderNumber)">关闭订单</view>
			<view v-if="orderDetails.status==1||orderDetails.status==2"
				@click="setCancelOrder(orderDetails.orderNumber)">取消订单</view>
			<view v-if="orderDetails.status==0" style="color: #FA436A;border-color: #FA436A;" @click="openPay">去付款
			</view>
			<!-- <view @click="openNewEvaluate" v-if="orderDetails.status==2" style="color: #FA436A;border-color: #FA436A;">评价</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderDetails: undefined ,//订单信息,
				horsemanEntity:{}
			}
		},
		onLoad() {
			var orderDetails = uni.getStorageSync("distributionInfo");
			this.orderDetails = orderDetails;
			this.token = uni.getStorageSync("token");
			
			this.getHorsemanId(this.orderDetails.horseman_id);
		},
		methods: {
			openPay() {
				uni.navigateTo({
					url: "../newOrder/payOrder/payOrder?data=" + JSON.stringify(this.orderDetails)
				})
			},
			getHorsemanId(id){
				var th = this;
				uni.request({
					url: th.serviceUrl + '/app-yytc-backstage/getHorsemanId',
					method: "GET",
					data:{
						id:id
						
					},
					success: (res) => {
						var code = res.data.code;
						if(code==200){
					
							this.horsemanEntity = res.data.data.horsemanEntity
						}else{
							uni.showToast({	
								title: res.data.msg,	
								icon:"none"
							})
						}
						
					},
					fail(res) {
						uni.showToast({
							title: '网络错误！',	
							icon:"none"
						})
					},
					complete() {
						
					}
					
				})
			
				
			},
			//查看退款详情
			orderRefundDetails(id) {
				uni.navigateTo({
					url: "./orderRefundDetails/orderRefundDetails?id=" + id

				})
			},
			//关闭订单，已付款订单
			setCancelOrder(orderNumber) {
				var th = this;
				uni.showModal({
					title: '提示',
					content: '你确定取消订单？',
					success: function(res) {
				 	if (res.confirm) {
							uni.showLoading({
								title: '请稍等',
								mask: true
							})
							uni.request({
								url: th.serviceUrl + '/app-yytc-all/setCancelOrder',
								method: "GET",
								data: {
									token: th.token,
									orderNumber: orderNumber

								},
								success: (res) => {
									var code = res.data.code;
									console.log(res)
									if (code == 200) {

										uni.showModal({
											title: '提示',
											content: res.data.msg,
											showCancel: false,
											success: function(res) {
												uni.navigateBack({

												})
											}
										});


									} else {
										uni.showToast({
											title: res.data.msg,
											icon: "none"
										})
									}

								},
								fail(res) {
									uni.showToast({
										title: '网络错误！',
										icon: "none"
									})
								},
								complete() {
									uni.hideLoading()
								}

							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
				 }
				});


			},

			//关闭订单，未付款订单
			setCloseOrder(orderNumber) {
				var th = this;
				uni.showModal({
					title: '提示',
					content: '你确定关闭订单？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍等',
								mask: true
							})
							uni.request({
								url: th.serviceUrl + '/app-yytc-all/setCloseOrder',
								method: "GET",
								data: {
									token: th.token,
									orderNumber: orderNumber

								},
								success: (res) => {
									var code = res.data.code;
									console.log(res)
									if (code == 200) {

										uni.showModal({
											title: '提示',
											content: res.data.msg,
											showCancel: false,
											success: function(res) {
												uni.navigateBack({

												})
											}
										});



									} else {
										uni.showToast({
											title: res.data.msg,
											icon: "none"
										})
									}

								},
								fail(res) {
									uni.showToast({
										title: '网络错误！',
										icon: "none"
									})
								},
								complete() {
									uni.hideLoading()
								}

							})
						} else if (res.cancel) {
							console.log('用户点击取消');
				  }
					}
				});
			},
			//打开商品详情页
			openCommodity(id) {
				uni.navigateTo({
					url: '/pages/shopDetail/shopDetail?goodsId=' + id
				})
			},
			//申请退款
			refund(data) {

				data.orderNumber = this.orderDetails.orderNumber;

				uni.navigateTo({
					url: "orderRefund/orderRefund?data=" + JSON.stringify(data)
				})
			},
			//打开评价页面
			openNewEvaluate() {
				uni.navigateTo({
					url: "../evaluate/newEvaluate/newEvaluate"
				})
			},
			//获取订单预计送达时间
			getAppointment_timeText(appointment_time) {
				if (appointment_time == -1) {
					return "付款后预计1-2小时达"
				}
				console.log(appointment_time + 3600)
				return this.getDateymd(appointment_time) + "|" + this.getDatehmm(appointment_time) + "-" + this.getDatehmm(
					parseInt(appointment_time) + 3600)
			}
		}
	}
</script>

<style>
	page {
		background-color: #FAFAFA;
		padding-bottom: 90upx;
	}

	.appointment {
		background-color: #FFFFFF;
		margin-top: 16upx;
	}

	.appointment {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.appointment .date {
		font-size: 14px;
		color: #888888;
		margin-top: 4upx;
		margin-right: 20upx;
	}

	.appointment .title {
		padding: 20upx;
		font-size: 16px;
		color: #555555;
		display: flex;
		flex-direction: row;

		align-items: center;
	}

	.appointment .title>image {
		width: 36upx;
		height: 36upx;
		margin-right: 10upx;

	}


	#function {
		position: fixed;
		bottom: 0upx;
		background-color: #FFFFFF;
		width: 100vw;
		display: flex;
		flex-direction: row;
		padding: 10upx 0upx;
		justify-content: flex-end;
		border-top: 1px solid #FAFAFA;
	}

	#function>view {
		margin: 14upx;
		font-size: 14px;
		border: 1px solid #C8C7CC;
		padding: 8upx 20upx;
		border-radius: 30upx;
		color: #555555;
	}

	.status {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #f68a8a;
		padding: 40upx 20upx;
		font-size: 16px;
		color: #FFFFFF;
	}

	.status .right>image {
		width: 100upx;
		height: 100upx;
	}

	.shipping_address {
		background-color: #FFFFFF;
		padding: 20upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 16px;
	}

	.shipping_address .icon>image {
		width: 48upx;
		height: 48upx;
		margin-right: 20upx;
	}

	.shipping_address .site .top {
		margin-bottom: 10upx;
	}

	.shipping_address .site .consignee {
		margin-right: 16upx;
	}

	.shipping_address .site .phone {
		color: #999999;
	}

	.commoditys {
		background-color: #FFFFFF;
		margin-top: 16upx;
	}

	.commoditys .headline {
		padding: 20upx;
		font-size: 16px;
		color: #555555;
		display: flex;
		flex-direction: row;

		align-items: center;
	}

	.commoditys .headline>image {
		width: 36upx;
		height: 36upx;
		margin-right: 10upx;

	}

	.commoditys .actual_payment {
		display: flex;
		flex-direction: row;
		padding: 2vw;
		width: 96vw;
		justify-content: space-between;
		font-size: 16px;
		color: #555555;
	}

	.commoditys .actual_payment .total_price {
		color: #DD524D;
	}

	.commoditys .commodity {
		width: 96vw;
		background-color: #FFFFFF;
		padding: 1vw 2vw;
		margin: 1vw 0upx;

		display: flex;
		flex-direction: row;

		flex-wrap: wrap;
	}

	.commoditys .commodity .function {
		margin-top: 10upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		width: 100vw;
	}

	.commoditys .commodity .function>view {
		font-size: 14px;
		border: 1px solid #E5E5E5;
		color: #999999;
		padding: 4upx 30upx;
		border-radius: 40upx;
		margin-left: 16upx;

	}

	.commoditys .commodity>image {
		width: 210upx;
		height: 210upx;
		border-radius: 16upx;
	}

	.commoditys .commodity .text {
		width: 460upx;

		margin-left: 16upx;
		padding: 10upx 0upx;

	}

	.commoditys .commodity .text .title {
		width: 460upx;
		height: 36px;
		line-height: 18px;
		color: #262626;
		font-size: 16px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-weight: 500;
	}

	.commoditys .commodity .text .specification {
		font-size: 14px;
		color: #999999;
		margin: 10upx 0upx;
	}

	.commoditys .commodity .text .price_count {
		margin-top: 20upx;
	}

	.commoditys .commodity .text .price {
		font-size: 16px;
		color: #555555;

	}


	.commoditys .commodity .text .count {
		font-size: 14px;
		color: #999999;
		margin-left: 40upx;
	}

	.order_information {
		background-color: #FFFFFF;
		padding: 20upx;
		margin-top: 16upx;

	}

	.order_information .headline {

		padding-bottom: 20upx;

		font-size: 16px;
		color: #555555;
		display: flex;
		flex-direction: row;

		align-items: center;
	}

	.order_information .headline>image {
		width: 36upx;
		height: 36upx;
		margin-right: 10upx;

	}


	.order_information .list {
		display: flex;
		flex-direction: row;
		font-size: 14px;
		margin: 16upx 0upx;
		color: #262626;
	}

	.order_information .list .title {
		width: 160upx;

	}

	.order_information .list .content {
		width: 540upx;

	}
</style>
